<template>
	<div class="file_dynamic_wrapper">
		<div class="header">
			<p>共计 {{ fileRecordData.length }} 条动态</p>
			<el-select v-model="checkedType" v-bind="selectConfig">
				<el-option label="全部" value=""></el-option>
				<el-option v-for="(item, index) in fileRecordEnum" :key="index" :label="item.msg" :value="item.value"></el-option>
			</el-select>
		</div>
		<div class="content">
			<dl v-for="(item, index) in fileRecordData" :key="index">
				<dt>{{ item.updateTime | timeLength }} &nbsp; | &nbsp; {{ item.updateTime }}</dt>
				<dd>
					<span>{{ item.createName }}</span>
					<el-tag>{{ operTypeName(item.type) }}</el-tag>
				</dd>
			</dl>
		</div>
	</div>
</template>

<script>
import { getFileRecordList, getFileRecordEnum } from '@/api/data/tbNetRecord';
export default {
	created() {
		this.getFileRecordEnumData();
	},
	data() {
		return {
			fileRecordEnum: [],
			fileRecordData: [],
			checkedType: '',
			selectConfig: {
				size: 'mini',
				style: { width: '150px' },
				popperAppendToBody: false,
				placeholder: '请选择操作方式'
			}
		};
	},
	computed: {
		fileId() {
			return this.$route.params.id;
		},
		operTypeName() {
			return (data) => {
				let info = this.fileRecordEnum.find((item) => item.value === data);
				return info.msg;
			};
		}
	},
	watch: {
		checkedType: {
			handler(val) {
				this.getFileRecordData(val);
			},
			immediate: true
		}
	},
	methods: {
		//获取文件操作枚举数据
		async getFileRecordEnumData() {
			let result = await getFileRecordEnum().then((res) => res.data);
			if (result.code === '0') {
				this.fileRecordEnum = !result.data ? [] : result.data[0];
			}
		},

		//获取文件操作记录数据
		async getFileRecordData(type) {
			let params = { page: 1, limit: 9999, category: '2', cpId: this.fileId, type };
			let result = await getFileRecordList(params).then((res) => res.data);
			if (result.code === '0') {
				this.fileRecordData = !result.data ? [] : result.data;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.file_dynamic_wrapper {
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px 16px 0;
	}
	.content {
		padding: 0 16px;
		dl {
			padding: 16px 0;
			line-height: 24px;
			border-top: solid 1px #e4e7ed;
			&:first-child {
				border-top: none;
			}
		}
		dt {
			margin-bottom: 10px;
		}
		dd {
			span {
				color: var(--primary);
			}
		}
		.el-tag {
			height: 24px;
			line-height: 22px;
			margin-left: 16px;
		}
	}
}
</style>
